import React from 'react';
import { Card } from 'antd';
import { Column } from '@ant-design/charts';

interface GradeData {
    grade: string;
    count: number;
}

interface GradeDistributionChartProps {
    loading: boolean;
    data: GradeData[];
}

const GradeDistributionChart: React.FC<GradeDistributionChartProps> = ({ loading, data }) => {
    const columnConfig = {
        data,
        xField: 'grade',
        yField: 'count',
        label: {
            position: 'middle',
            style: {
                fill: '#FFFFFF',
                opacity: 0.6,
            },
        },
        xAxis: {
            label: {
                autoHide: true,
                autoRotate: false,
            },
        },
        height: 300,
        autoFit: true,
        style: {
            fill: '#c1e2f7',
        }
    };

    return (
        <Card
            title="年级人数分布"
            loading={loading}
            bodyStyle={{ padding: '16px' }}
        >
            {!loading && data.length > 0 ? (
                <div style={{ height: 300 }}>
                    <Column {...columnConfig} />
                </div>
            ) : (
                <div style={{ height: 300, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                    {loading ? '加载中...' : '暂无数据'}
                </div>
            )}
        </Card>
    );
};

export default GradeDistributionChart;